<!DOCTYPE html>
<html lang="en">

<!-- Head tag -->
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="google-site-verification" content="xBT4GhYoi5qRD5tr338pgPM5OWHHIDR6mNg1a3euekI" />
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="android mio4kon mio">
    <meta name="keyword"  content="">
    <link rel="shortcut icon" href="/img/favicon.ico">

    <title>
        
          移动端自动化测试系列之二——利器pytest教程 - Mio4kon的博客 | Mio4kon&#39;s Blog
        
    </title>

    <link rel="canonical" href="http://mio4kon.com/2017/04/12/移动端自动化测试系列之二——利器pytest教程/">

    <!-- Bootstrap Core CSS -->
    <link rel="stylesheet" href="/css/bootstrap.min.css">

    <!-- Custom CSS -->
    <link rel="stylesheet" href="/css/hux-blog.min.css">

    <!-- Pygments Highlight CSS -->
    <link rel="stylesheet" href="/css/highlight.css">

    <!-- Custom Fonts -->
    <!-- <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet" type="text/css"> -->
    <!-- Hux change font-awesome CDN to qiniu -->
    <link href="https://cdn.staticfile.org/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet" type="text/css">


    <!-- Hux Delete, sad but pending in China
    <link href='http://fonts.googleapis.com/css?family=Lora:400,700,400italic,700italic' rel='stylesheet' type='text/css'>
    <link href='http://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,300,600,700,800' rel='stylesheet' type='text/
    css'>
    -->


    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
        <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
        <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->

    <!-- ga & ba script hoook -->
    <script></script>
</head>


<!-- hack iOS CSS :active style -->
<body ontouchstart="">

    <!-- Navigation -->
<nav class="navbar navbar-default navbar-custom navbar-fixed-top">
    <div class="container-fluid">
        <!-- Brand and toggle get grouped for better mobile display -->
        <div class="navbar-header page-scroll">
            <button type="button" class="navbar-toggle">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="/">Mio4kon</a>
        </div>

        <!-- Collect the nav links, forms, and other content for toggling -->
        <!-- Known Issue, found by Hux:
            <nav>'s height woule be hold on by its content.
            so, when navbar scale out, the <nav> will cover tags.
            also mask any touch event of tags, unfortunately.
        -->
        <div id="huxblog_navbar">
            <div class="navbar-collapse">
                <ul class="nav navbar-nav navbar-right">
                    <li>
                        <a href="/">Home</a>
                    </li>

                    

                        
                    

                        
                        <li>
                            <a href="/archives/">Archives</a>
                        </li>
                        
                    

                        
                        <li>
                            <a href="/about/">About</a>
                        </li>
                        
                    

                        
                        <li>
                            <a href="/tags/">Tags</a>
                        </li>
                        
                    
                    
                </ul>
            </div>
        </div>
        <!-- /.navbar-collapse -->
    </div>
    <!-- /.container -->
</nav>
<script>
    // Drop Bootstarp low-performance Navbar
    // Use customize navbar with high-quality material design animation
    // in high-perf jank-free CSS3 implementation
    var $body   = document.body;
    var $toggle = document.querySelector('.navbar-toggle');
    var $navbar = document.querySelector('#huxblog_navbar');
    var $collapse = document.querySelector('.navbar-collapse');

    $toggle.addEventListener('click', handleMagic)
    function handleMagic(e){
        if ($navbar.className.indexOf('in') > 0) {
        // CLOSE
            $navbar.className = " ";
            // wait until animation end.
            setTimeout(function(){
                // prevent frequently toggle
                if($navbar.className.indexOf('in') < 0) {
                    $collapse.style.height = "0px"
                }
            },400)
        }else{
        // OPEN
            $collapse.style.height = "auto"
            $navbar.className += " in";
        }
    }
</script>


    <!-- Main Content -->
    
<!-- Image to hack wechat -->
<!-- <img src="http://mio4kon.com/img/icon_wechat.png" width="0" height="0"> -->
<!-- <img src="{{ site.baseurl }}/{% if page.header-img %}{{ page.header-img }}{% else %}{{ site.header-img }}{% endif %}" width="0" height="0"> -->

<!-- Post Header -->
<style type="text/css">
    header.intro-header{
        background-image: url('/img/home-bg.jpg')
    }
</style>
<header class="intro-header" >
    <div class="container">
        <div class="row">
            <div class="col-lg-8 col-lg-offset-2 col-md-10 col-md-offset-1">
                <div class="post-heading">
                    <div class="tags">
                        
                          <a class="tag" href="/tags/#移动自动化测试" title="移动自动化测试">移动自动化测试</a>
                        
                    </div>
                    <h1>移动端自动化测试系列之二——利器pytest教程</h1>
                    <h2 class="subheading">pytest教程</h2>
                    <span class="meta">
                        Posted by Mio4kon on
                        2017-04-12
                    </span>
                </div>
            </div>
        </div>
    </div>
</header>

<!-- Post Content -->
<article>
    <div class="container">
        <div class="row">

    <!-- Post Container -->
            <div class="
                col-lg-8 col-lg-offset-2
                col-md-10 col-md-offset-1
                post-container">

                <h1 id="前言"><a href="#前言" class="headerlink" title="前言"></a>前言</h1><p><code>pytest</code>是一个方便去写测试用例的测试框架.由于一开始我也不太清楚python有哪些比较好的测试框架,所以在写框架之前先调研了一些常见的测试框架.</p>
<ul>
<li>Unittest</li>
<li>Doctest</li>
<li>pytest</li>
<li>nose</li>
</ul>
<p>最终我倾向于<code>nose</code>和<code>pytest</code>,在进一步的了解这两款测试框架的api之后,最终选用了<code>pytest</code>,原因是使用起来真的非常简单.而且对<code>Allure</code>支持的非常好,这是后话了.我们先来看看<code>pytest</code>到底怎么使用吧.</p>
<p>这里我使用的IDE是:<a href="https://www.jetbrains.com/pycharm/" target="_blank" rel="external">pycharm</a>,非常好用.建议下载一个使用.尤其是对应python新手.</p>
<h1 id="pytest-安装"><a href="#pytest-安装" class="headerlink" title="pytest 安装"></a>pytest 安装</h1><pre><code>pip3 install pytest
</code></pre><p>或者设置Pycharm的工程解释器来安装</p>
<p>进入Preferences:</p>
<p><img src="http://mio4kon.qiniudn.com/14919750356253.jpg" alt=""></p>
<h1 id="pytest-使用"><a href="#pytest-使用" class="headerlink" title="pytest 使用"></a>pytest 使用</h1><h2 id="sample-run"><a href="#sample-run" class="headerlink" title="sample-run"></a>sample-run</h2><p>创建一个 sample.py 文件</p>
<figure class="highlight python"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div></pre></td><td class="code"><pre><div class="line"><span class="comment"># content of sample.py</span></div><div class="line"><span class="function"><span class="keyword">def</span> <span class="title">test_answer</span><span class="params">()</span>:</span></div><div class="line">   <span class="keyword">assert</span> <span class="number">1</span> + <span class="number">2</span> == <span class="number">3</span></div></pre></td></tr></table></figure>
<p>执行</p>
<pre><code>py.test sample.py
或者
pytest sample.py
</code></pre><p><img src="http://mio4kon.qiniudn.com/14919755120813.jpg" alt=""></p>
<p>可以发现用例执行成功.</p>
<p>上述命令可以使pytest自动查找 sample.py 文件下所有的格式为:<code>test_*</code>的方法,然后执行用例.执行顺序为方法的顺序.</p>
<p>如果有多个py文件,可以直接使用下面命令</p>
<pre><code>pytest
</code></pre><p>这个命令会找出当前目录下所有格式为<code>test_*.py</code> 或 <code>*_test.py</code>的文件然后执行用例.上面我们定义的文件名为<code>sample.py</code>,所以如果使用<code>pytest</code>是找不到用例的,我们需要把名称改成<code>test_sample.py</code>或者<code>sample_test.py</code></p>
<p>注意文件内的方法名必须是<code>test_*</code>这种类型.如果写成<code>def answer_test()</code> 也是找不到的.<br>查找规则见文档: <a href="https://docs.pytest.org/en/latest/goodpractices.html#test-discovery" target="_blank" rel="external">test-discovery</a></p>
<h2 id="输出日志"><a href="#输出日志" class="headerlink" title="输出日志"></a>输出日志</h2><p>在测试用例中输出日志,是常见的场景,如下</p>
<figure class="highlight python"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div></pre></td><td class="code"><pre><div class="line"><span class="comment"># content of test_sample.py</span></div><div class="line"><span class="class"><span class="keyword">class</span> <span class="title">TestSample</span>:</span></div><div class="line">   <span class="function"><span class="keyword">def</span> <span class="title">test_answer</span><span class="params">(self)</span>:</span></div><div class="line">       print(<span class="string">'this is a log'</span>)</div><div class="line">       <span class="keyword">assert</span> <span class="number">1</span> + <span class="number">2</span> == <span class="number">3</span></div></pre></td></tr></table></figure>
<p>然后执行<code>py.test sample.py</code>是不会输出日志的.需要加上<code>-s</code>参数.同时建议也加上<code>-q</code>参数.即<code>quiet</code> 报道模式,这样输出会好看点.</p>
<pre><code>pytest test_sample.py -s -q
</code></pre><p><img src="http://mio4kon.qiniudn.com/14919772053536.jpg" alt=""></p>
<h2 id="fixtures"><a href="#fixtures" class="headerlink" title="fixtures"></a>fixtures</h2><p>说到测试框架自然要说到<code>setup和teardown</code>两个方法.</p>
<ul>
<li><code>setup</code>是用来做准备操作.一般用来初始化资源.</li>
<li><code>teardown</code>是用来做收尾操作.一般用了关闭资源.</li>
</ul>
<p>pytest的<code>setup</code>和<code>teardown</code>是利用<code>@pytest.fixture</code>这个注释来完成的.不仅可以完成初始化操作,初始化后如果有数据需要给用例使用也是非常方便!</p>
<h3 id="setup"><a href="#setup" class="headerlink" title="setup"></a>setup</h3><p>直接来看下面代码.</p>
<figure class="highlight python"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div></pre></td><td class="code"><pre><div class="line"><span class="comment"># content of test_sample.py</span></div><div class="line"><span class="keyword">import</span> pytest</div><div class="line"><span class="class"><span class="keyword">class</span> <span class="title">TestSample</span>:</span></div><div class="line"><span class="meta">   @pytest.fixture()</span></div><div class="line">   <span class="function"><span class="keyword">def</span> <span class="title">count</span><span class="params">(self)</span>:</span></div><div class="line">       print(<span class="string">'init count'</span>)</div><div class="line">       <span class="keyword">return</span> <span class="number">10</span></div><div class="line"></div><div class="line">   <span class="function"><span class="keyword">def</span> <span class="title">test_answer</span><span class="params">(self, count)</span>:</span></div><div class="line">       print(<span class="string">'get count %s'</span> % count)</div><div class="line">       <span class="keyword">assert</span> count == <span class="number">10</span></div></pre></td></tr></table></figure>
<p>执行结果:</p>
<p><img src="http://mio4kon.qiniudn.com/14919815950749.jpg" alt=""></p>
<p>通过<code>@pytest.fixture()</code> 注释会在执行测试用例之前初始化操作.然后直接在测试用例的方法中就可以拿到初始化返回的参数(参数名要和初始化的方法名一样)</p>
<p>OK,假如我们新增一个方法会怎么样?</p>
<figure class="highlight python"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div><div class="line">13</div><div class="line">14</div><div class="line">15</div></pre></td><td class="code"><pre><div class="line"><span class="comment"># content of test_sample.py</span></div><div class="line"><span class="keyword">import</span> pytest</div><div class="line"><span class="class"><span class="keyword">class</span> <span class="title">TestSample</span>:</span></div><div class="line"><span class="meta">   @pytest.fixture()</span></div><div class="line">   <span class="function"><span class="keyword">def</span> <span class="title">count</span><span class="params">(self)</span>:</span></div><div class="line">       print(<span class="string">'init count'</span>)</div><div class="line">       <span class="keyword">return</span> <span class="number">10</span></div><div class="line"></div><div class="line">   <span class="function"><span class="keyword">def</span> <span class="title">test_answer</span><span class="params">(self, count)</span>:</span></div><div class="line">       print(<span class="string">'test_answer get count %s'</span> % count)</div><div class="line">       <span class="keyword">assert</span> count == <span class="number">10</span></div><div class="line"></div><div class="line">   <span class="function"><span class="keyword">def</span> <span class="title">test_answer_2</span><span class="params">(self, count)</span>:</span></div><div class="line">       print(<span class="string">'test_answer_2 get count %s'</span> % count)</div><div class="line">       <span class="keyword">assert</span> count == <span class="number">10</span></div></pre></td></tr></table></figure>
<p><img src="http://mio4kon.qiniudn.com/14919822617181.jpg" alt=""></p>
<p>可以发现 init count 这条日志输出两遍,也就是执行了两次初始化.这并没有什么问题.但是有时候我们希望的一个全局的初始化,既我们希望在这个类中只会执行一次这个初始化该怎么做?</p>
<p><code>fixture</code> 有一个域(<code>scope</code>)的概念,用来指定该 <code>fixture</code> 的使用范围.</p>
<p>这里有五种域: module/class/session/invocation/function(default).</p>
<p>为了简单测试,这里我们修改一下工程目录结构,并且把<code>fixture</code>专门放到一个文件中方便使用:</p>
<p><img src="http://mio4kon.qiniudn.com/14919841909345.jpg" alt=""></p>
<p>通过下面命令可以列出当前目录中查找出来的所有 <code>fixture</code></p>
<pre><code>pytest --fixtures
或者
pytest --fixtures [目录]
</code></pre><p><img src="http://mio4kon.qiniudn.com/14919844939532.jpg" alt=""></p>
<p><strong>这里有个坑,就是虽然这里发现了 count 这个fixture,但在跑case的时候会报错说找不到!</strong></p>
<p>原因是写 <code>fixture</code> 的文件的文件名不能瞎比写啊(捂脸),必须叫做 <code>conftest.py</code></p>
<p>改完文件名后我们在运行:<br><img src="http://mio4kon.qiniudn.com/14919867288333.jpg" alt=""></p>
<p>这是在使用 seesion 域的情况下,可以发现init只执行一次.假如我们需要这种情况,每一个类都执行一次init,那么很简单直接把域改成 class 即可,同理 module 是基于模块的.有兴趣可以都去尝试一下.这里就不细说了.</p>
<h3 id="teardown"><a href="#teardown" class="headerlink" title="teardown"></a>teardown</h3><p>利用python 的语法 <code>yield</code> 即可.</p>
<figure class="highlight python"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div></pre></td><td class="code"><pre><div class="line"><span class="comment"># content of conftest.py</span></div><div class="line"><span class="keyword">import</span> pytest</div><div class="line"><span class="meta">@pytest.fixture(scope="session")</span></div><div class="line"><span class="function"><span class="keyword">def</span> <span class="title">count</span><span class="params">()</span>:</span></div><div class="line">   	print(<span class="string">'init count'</span>)</div><div class="line">   	<span class="keyword">yield</span> <span class="number">10</span></div><div class="line">   	print(<span class="string">'teardown count'</span>)</div></pre></td></tr></table></figure>
<p>执行结果</p>
<p><img src="http://mio4kon.qiniudn.com/14919873459595.jpg" alt=""></p>
<h2 id="代码中执行用例"><a href="#代码中执行用例" class="headerlink" title="代码中执行用例"></a>代码中执行用例</h2><p>有些时候需要在代码中调用执行case的方法.而不是通过command的方式.我们可以在python代码中加入下面代码即可:</p>
<pre><code>args = [&apos;-s&apos;, &apos;-q&apos;]
pytest.main(args)
</code></pre><h1 id="参考文档"><a href="#参考文档" class="headerlink" title="参考文档"></a>参考文档</h1><p>如果上述内容消化完后,那么测试框架的使用已经没有什么问题了.如果还需要了解其他的特性,可以参考官网文档.</p>
<p><a href="https://docs.pytest.org/en/latest/contents.html" target="_blank" rel="external">https://docs.pytest.org/en/latest/contents.html</a></p>


                <hr>

                

                <ul class="pager">
                    
                        <li class="previous">
                            <a href="/2017/04/12/移动端自动化测试系列之三——暴力输出allure教程/" data-toggle="tooltip" data-placement="top" title="移动端自动化测试系列之三——暴力输出allure教程">&larr; Previous Post</a>
                        </li>
                    
                    
                        <li class="next">
                            <a href="/2017/04/12/移动端自动化测试系列之一——环境搭建/" data-toggle="tooltip" data-placement="top" title="移动端自动化测试系列之一——环境搭建">Next Post &rarr;</a>
                        </li>
                    
                </ul>

                

                
                <!-- disqus 评论框 start -->
                <div class="comment">
                    <div id="disqus_thread" class="disqus-thread"></div>
                </div>
                <!-- disqus 评论框 end -->
                

            </div>
    <!-- Side Catalog Container -->
        
            <div class="
                col-lg-2 col-lg-offset-0
                visible-lg-block
                sidebar-container
                catalog-container">
                <div class="side-catalog">
                    <hr class="hidden-sm hidden-xs">
                    <h5>
                        <a class="catalog-toggle" href="#">CATALOG</a>
                    </h5>
                    <ul class="catalog-body"></ul>
                </div>
            </div>
        

    <!-- Sidebar Container -->

            <div class="
                col-lg-8 col-lg-offset-2
                col-md-10 col-md-offset-1
                sidebar-container">

                <!-- Featured Tags -->
                
                <section>
                    <!-- no hr -->
                    <h5><a href="/tags/">FEATURED TAGS</a></h5>
                    <div class="tags">
                       
                          <a class="tag" href="/tags/#移动自动化测试" title="移动自动化测试">移动自动化测试</a>
                        
                    </div>
                </section>
                

                <!-- Friends Blog -->
                
                <hr>
                <h5>FRIENDS</h5>
                <ul class="list-inline">

                    
                        <li><a href="http://lrd.ele.me/" target="_blank">lrd ele&#39;s Blog</a></li>
                    
                </ul>
                
            </div>

        </div>
    </div>
</article>




<!-- disqus 公共JS代码 start (一个网页只需插入一次) -->
<script type="text/javascript">
    /* * * CONFIGURATION VARIABLES * * */
    var disqus_shortname = "hexo-theme-huxblog";
    var disqus_identifier = "http://mio4kon.com/2017/04/12/移动端自动化测试系列之二——利器pytest教程/";
    var disqus_url = "http://mio4kon.com/2017/04/12/移动端自动化测试系列之二——利器pytest教程/";

    (function() {
        var dsq = document.createElement('script'); dsq.type = 'text/javascript'; dsq.async = true;
        dsq.src = '//' + disqus_shortname + '.disqus.com/embed.js';
        (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);
    })();
</script>
<!-- disqus 公共JS代码 end -->




<!-- async load function -->
<script>
    function async(u, c) {
      var d = document, t = 'script',
          o = d.createElement(t),
          s = d.getElementsByTagName(t)[0];
      o.src = u;
      if (c) { o.addEventListener('load', function (e) { c(null, e); }, false); }
      s.parentNode.insertBefore(o, s);
    }
</script>
<!-- anchor-js, Doc:http://bryanbraun.github.io/anchorjs/ -->
<script>
    async("https://cdn.bootcss.com/anchor-js/1.1.1/anchor.min.js",function(){
        anchors.options = {
          visible: 'always',
          placement: 'right',
          icon: '#'
        };
        anchors.add().remove('.intro-header h1').remove('.subheading').remove('.sidebar-container h5');
    })
</script>
<style>
    /* place left on bigger screen */
    @media all and (min-width: 800px) {
        .anchorjs-link{
            position: absolute;
            left: -0.75em;
            font-size: 1.1em;
            margin-top : -0.1em;
        }
    }
</style>



    <!-- Footer -->
    <!-- Footer -->
<footer>
    <div class="container">
        <div class="row">
            <div class="col-lg-8 col-lg-offset-2 col-md-10 col-md-offset-1">
                <ul class="list-inline text-center">
                
                
                

                
                    <li>
                        <a target="_blank" href="http://weibo.com/u/3198010790">
                            <span class="fa-stack fa-lg">
                                <i class="fa fa-circle fa-stack-2x"></i>
                                <i class="fa fa-weibo fa-stack-1x fa-inverse"></i>
                            </span>
                        </a>
                    </li>
                

                

                
                    <li>
                        <a target="_blank"  href="https://github.com/Mio4kon">
                            <span class="fa-stack fa-lg">
                                <i class="fa fa-circle fa-stack-2x"></i>
                                <i class="fa fa-github fa-stack-1x fa-inverse"></i>
                            </span>
                        </a>
                    </li>
                

                

                </ul>
                <p class="copyright text-muted">
                    Copyright &copy; Mio4kon 2017 
                    <br>
                    Theme by <a href="http://huangxuan.me">Hux</a> 
                    <span style="display: inline-block; margin: 0 5px;">
                        <i class="fa fa-heart"></i>
                    </span> 
                    Ported by <a href="http://blog.kaijun.rocks">Kaijun</a> | 
                    <iframe
                        style="margin-left: 2px; margin-bottom:-5px;"
                        frameborder="0" scrolling="0" width="91px" height="20px"
                        src="https://ghbtns.com/github-btn.html?user=kaijun&repo=hexo-theme-huxblog&type=star&count=true" >
                    </iframe>
                </p>
            </div>
        </div>
    </div>
</footer>

<!-- jQuery -->
<script src="/js/jquery.min.js"></script>

<!-- Bootstrap Core JavaScript -->
<script src="/js/bootstrap.min.js"></script>

<!-- Custom Theme JavaScript -->
<script src="/js/hux-blog.min.js"></script>


<!-- async load function -->
<script>
    function async(u, c) {
      var d = document, t = 'script',
          o = d.createElement(t),
          s = d.getElementsByTagName(t)[0];
      o.src = u;
      if (c) { o.addEventListener('load', function (e) { c(null, e); }, false); }
      s.parentNode.insertBefore(o, s);
    }
</script>

<!-- 
     Because of the native support for backtick-style fenced code blocks 
     right within the Markdown is landed in Github Pages, 
     From V1.6, There is no need for Highlight.js, 
     so Huxblog drops it officially.

     - https://github.com/blog/2100-github-pages-now-faster-and-simpler-with-jekyll-3-0  
     - https://help.github.com/articles/creating-and-highlighting-code-blocks/    
-->
<!--
    <script>
        async("http://cdn.bootcss.com/highlight.js/8.6/highlight.min.js", function(){
            hljs.initHighlightingOnLoad();
        })
    </script>
    <link href="http://cdn.bootcss.com/highlight.js/8.6/styles/github.min.css" rel="stylesheet">
-->


<!-- jquery.tagcloud.js -->
<script>
    // only load tagcloud.js in tag.html
    if($('#tag_cloud').length !== 0){
        async("http://mio4kon.com/js/jquery.tagcloud.js",function(){
            $.fn.tagcloud.defaults = {
                //size: {start: 1, end: 1, unit: 'em'},
                color: {start: '#bbbbee', end: '#0085a1'},
            };
            $('#tag_cloud a').tagcloud();
        })
    }
</script>

<!--fastClick.js -->
<script>
    async("https://cdn.bootcss.com/fastclick/1.0.6/fastclick.min.js", function(){
        var $nav = document.querySelector("nav");
        if($nav) FastClick.attach($nav);
    })
</script>


<!-- Google Analytics -->




<!-- Baidu Tongji -->


<!-- Side Catalog -->

<script type="text/javascript">
    function generateCatalog (selector) {
        var P = $('div.post-container'),a,n,t,l,i,c;
        a = P.find('h1,h2,h3,h4,h5,h6');
        a.each(function () {
            n = $(this).prop('tagName').toLowerCase();
            i = "#"+$(this).prop('id');
            t = $(this).text();
            c = $('<a href="'+i+'" rel="nofollow">'+t+'</a>');
            l = $('<li class="'+n+'_nav"></li>').append(c);
            $(selector).append(l);
        });
        return true;    
    }

    generateCatalog(".catalog-body");

    // toggle side catalog
    $(".catalog-toggle").click((function(e){
        e.preventDefault();
        $('.side-catalog').toggleClass("fold")
    }))

    /*
     * Doc: https://github.com/davist11/jQuery-One-Page-Nav
     * Fork by Hux to support padding
     */
    async("/js/jquery.nav.js", function () {
        $('.catalog-body').onePageNav({
            currentClass: "active",
            changeHash: !1,
            easing: "swing",
            filter: "",
            scrollSpeed: 700,
            scrollOffset: 0,
            scrollThreshold: .2,
            begin: null,
            end: null,
            scrollChange: null,
            padding: 80
        });
    });
</script>





<!-- Image to hack wechat -->
<img src="http://mio4kon.com/img/icon_wechat.png" width="0" height="0" />
<!-- Migrate from head to bottom, no longer block render and still work -->

</body>

</html>
